<template>
    <div>
        <div class="container">
            <el-page-header @back="goBack" content="库存台账与调整记录"></el-page-header>
            <div class="e-m-t-45">
                <el-radio-group v-model="dataType" class="e-m-b-45">
                    <el-radio-button label="0">出入库台账</el-radio-button>
                    <el-radio-button label="1">调整明细</el-radio-button>
                </el-radio-group>
            </div>
            <!-- 出入库台账 -->
            <div v-if="dataType == 0">
                <el-table :data="stockDetailsList" stripe style="width: 100%;">
                    <el-table-column prop="number" label="编号" fixed="left" width="200">
                        <template slot-scope="scope">
                            <nuxt-link class="e-font-14 color-main el-button el-button--text el-button--small" :to="goView(scope.row)">{{ scope.row.number }}</nuxt-link>
                        </template>
                    </el-table-column>
                    <el-table-column prop="store" label="调整站点">
                        <template slot-scope="scope">
                            <nuxt-link class="e-font-14 color-main el-button el-button--text el-button--small" :to="'shop/details?id='+scope.row.store.id">{{ scope.row.store.name }}</nuxt-link>
                        </template>
                    </el-table-column>
                    <el-table-column prop="typenames" label="类型"></el-table-column>
                    <el-table-column prop="productname" label="可回收物"></el-table-column>
                    <el-table-column prop="weight" label="数量"></el-table-column>
                    <el-table-column prop="price" label="单价"></el-table-column>
                    <el-table-column prop="amount" label="金额"></el-table-column>
                    <el-table-column prop="ordertype" label="订单类型"></el-table-column>
                    <el-table-column prop="datetime" label="订单创建时间"></el-table-column>
                    <el-table-column label="操作" fixed="right" width="200">
                        <template slot-scope="scope">
                            <nuxt-link class="e-font-12 color-main el-button el-button--text el-button--small" :to="goView(scope.row)">查看</nuxt-link>
                        </template>
                    </el-table-column>
                </el-table>
                <div class="table-pagination" v-if="stockDetailsList.length > 0">
                    <el-pagination background layout="sizes, total, prev, pager, next" :total="total" :page-sizes="[10, 50, 100, 200]"
                        :page-size="pageSize" :current-page="pageIndex" @current-change="pageChange" @size-change="handleSizeChange">
                    </el-pagination>
                </div>
            </div>
            <!-- 调整明细 -->
            <div v-if="dataType == 1">
                <el-table :data="stockAdjustList" stripe style="width: 100%;">
                    <el-table-column prop="content" label="调整站点">
                        <template slot-scope="scope">
                            <nuxt-link v-if="scope.row.store" class="e-font-14 color-main el-button el-button--text el-button--small" :to="'shop/details?id='+scope.row.store.id">{{ scope.row.store.name }}</nuxt-link>
                        </template>
                    </el-table-column>
                    <el-table-column prop="typenames" label="类型"></el-table-column>
                    <el-table-column prop="productname" label="可回收物"></el-table-column>
                    <el-table-column prop="createusername" label="操作人" width="200"></el-table-column>
                    <el-table-column prop="createddatetime" label="修改时间" width="200"></el-table-column>
                </el-table>
                <div class="table-pagination" v-if="stockAdjustList.length > 0">
                    <el-pagination background layout="sizes, total, prev, pager, next" :total="total" :page-sizes="[10, 50, 100, 200]"
                        :page-size="pageSize" :current-page="pageIndex" @current-change="pageChange" @size-change="handleSizeChange">
                    </el-pagination>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
export default {
    layout: 'admin',
    head() {
        return {
            title: '库存台账与调整记录' 
        }
    },
    data() {
        return {
            productId: 0,
            storeId: 0,
            dataType: 0,
            loading: false,
            pageIndex: 1,
            pageSize: 10,
            total: 0,
            stockDetailsList: [], //出入库台账列表
            stockAdjustList: [], //调整明细列表
        };
    },
    mounted() {
        this.productId = this.$route.query.productId
        this.storeId = this.$route.query.storeId
        this.getStockDetailsList()
    },
    watch: {
        dataType(val) {
            if (val == 0) {
                this.pageIndex = 1
                this.getStockDetailsList()
            } else if (val == 1) {
                this.pageIndex = 1
                this.getStockAdjustList()
            }
        }
    },
    methods:{
        goBack() {
            this.$router.go(-1)
        },
        pageChange(e) { // 页码切换事件
            this.pageIndex = e;
            if(this.dataType == 0){
                this.getStockDetailsList()
            }else{
                this.getStockAdjustList()
            }
        },
        handleSizeChange(val) {
            this.pageIndex = 1;
            this.pageSize = val;
            if(this.dataType == 0){
                this.getStockDetailsList()
            }else{
                this.getStockAdjustList()
            }
        },
        goView(row) {
            if(row.ordertype == '线下入库单'){
                return '/order/brother/fitViews?id=' + row.id
            }else if(row.ordertype == '小哥出库单'){
                return '/order/store/Views?id=' + row.id
            }else if(row.ordertype == '小哥入库单'){
                return '/order/brother/Views?id=' + row.id
            }else{
                return '/order/brother/moveviews?id=' + row.id
            }
		},
        getStockDetailsList(){ //获取出入库台账列表
            this.$axios.post('/Store/Stock/Ledger', {
                "pageIndex": this.pageIndex,
                "pageSize": this.pageSize,
                "productId": this.productId,
                "storeId": this.storeId
            }).then((res) => {
                console.log(res)
                this.stockDetailsList = res.rows
                this.total = res.total
            }).catch((err) => {
                this.loading = false
            })
        },
        getStockAdjustList(){ //获取调整明细
            this.$axios.post('/Store/Stock/AdjustList', {
                "pageIndex": this.pageIndex,
                "pageSize": this.pageSize,
                "productId": this.productId,
                "storeId": this.storeId
            }).then((res) => {
                console.log(res)
                this.stockAdjustList = res.rows
                this.total = res.total
            }).catch((err) => {
                this.loading = false
            })
        }
    }
};
</script>